<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <!-- <p>count 值：{{ $store.state.count }}</p> -->
    <p>count 值：{{ count }}</p>

    <p>所有订单的总价为： {{ $store.getters.total }}</p>

    <!-- 这是不规范的写法，不建议 -->
    <!-- 为什么不要这样写？因为会造成调试工具无法追踪到他的修改 -->
    <!-- <button @click="$store.state.count++" class="btn btn-primary">+1</button> -->
    <!-- <button @click="$store.commit('add')" class="btn btn-primary">+1</button> -->
    
    <!-- 这里的add是调用自己组件里的add -->
    <button @click="add" class="btn btn-primary">调用add--自己组件的</button>
    <!-- 这是调用vuex里的add -->
    <button @click="vuexAdd" class="btn btn-primary">vuex里+1</button>
    <!-- 这也是间接调用vuex里的add5 -->
    <button @click="add5" class="btn btn-primary">+5</button>
    <!-- 这是直接调用vuex里的addSomeNum -->
    <button @click="$store.commit('addSomeNum',{ num1: 100, num2: 200 })" class="btn btn-primary">+自己传的数字</button>
    <!-- 这是间接调用vuex里的addSomeNum(通过mapMutations生成的) -->
    <button @click="addSomeNum({ num1: 100, num2: 200 })" class="btn btn-primary">+自己传的数字</button>
  
    <button @click="$store.dispatch('asyncAdd', 101)">调用actions里的add</button>
    <button @click="asyncAdd(101)">调用actions里的add -- 映射简写</button>
  </div>
</template>

<script>

/*
  总结：
    1. mapState是用来让我们方便快速访问state里的数据
       它是挂载到计算属性 `computed` 里面的
    2. mapMutatons是用来让我们方便快速调用mutations里的方法的
        它是挂载到方法也就是 `methods` 里的
    3. mapActions是用来让我们方便快速调用`actions`里的方法的
        它是挂载到方法也就是 `methods` 里的
*/
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Left',

  methods: {

    // add () {

    //   this.$store.commit('add')
    // },
    // 如果你使用辅助函数，他能帮你生成上面这样的代码
    // ...mapMutations(['add', 'add5']),
    
    // addSomeNum (obj) {

    //   this.$store.commit('addSomeNum', obj)
    // },

    // 把add改名为vuexAdd，还有导入add5，但是不改名
    ...mapMutations({ vuexAdd: 'add', add5: 'add5', addSomeNum: 'addSomeNum' }),

    ...mapActions(['asyncAdd']),
    // 假设我本身methods里就已经有叫add的方法了
    add () {

      console.log('我是组件本身有的add方法')
    }
  },

  computed: {
    ...mapState(['count']),

    // 因为vuex里已经封装了总价
    // 这里就不需要自己封装了
    // total () {

    //   // 拿到vuex里的数据做遍历
    //   let sum = 0
    //   this.$store.state.orders.forEach( v => sum += v.price)
    //   return sum
    // }
  }
}
</script>

<style>
</style>
